<template>
<div id="swiper-content">
  <swiper :options="swiperOption" ref="swiper">
    <swiper-slide :key="index" v-for="(item,index) in slideData">
      <div class="img-container">
        <img v-show="!(item.src === null)" :src="item.src" alt="thumb">
        <md-spinner v-show="!(item.state === 'finished')" class="loading-spinner" :md-size="75" :md-stroke="2" md-indeterminate></md-spinner>
      </div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  <div class="close-swiper" @click="TOOGLE_SWIPE">
    <md-icon>close</md-icon>
  </div>
</div>
</template>

<script>
  import {mapActions, mapState, mapMutations} from 'vuex'
  export default {
    data () {
      return {
        swiperOption: {
          pagination: '.swiper-pagination',
          paginationType: 'fraction',
          notNextTick: true,
          observer: true,
          observeParents: true,
          onTouchEnd: swiper => {
            let index = swiper.activeIndex
            let pIndex = swiper.previousIndex
            let action = null
            if (index > pIndex) {
              action = 'NEXT'
            } else if (index < pIndex) {
              action = 'PREVIOUS'
            }
            this.preLoadThumb({index: index + 1, action})
            swiper.update()
          }
        }
      }
    },
    methods: {
      ...mapActions([
        'preLoadThumb'
      ]),
      ...mapMutations([
        'TOOGLE_SWIPE'
      ]),
      slideTo (index) {
        this.swiper.slideTo(index, 0, true)
      }
    },
    computed: {
      ...mapState([
        'thumb'
      ]),
      swiper () {
        return this.$refs.swiper.swiper
      }
    },
    mounted () {
      this.slideTo(this.thumb.initIndex)
    },
    props: ['slideData']
  }
</script>
<style>
#swiper-content {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #ffffff;
}
.swiper-container {
  height: 100%
}
.swiper-slide {
  display: flex;
  align-items: center;
}
.close-swiper {
  position: absolute;
  top: 0px;
  right: 10px;
  z-index: 99999
}
.loading-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -32.5px;
  margin-top: -32.5px;
}
</style>
